<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<style>

</style>
<div id="app">
    <template>
        <el-card>
            <div style="text-align: center;font-weight: bold">基础信息</div>
            <el-form :model="formData" ref="formData" :rules="rules" label-width="100px" style="margin-top: 1%">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="表名称" prop="tableName">
                            <el-input size="small" v-model="formData.tableName"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="表备注" prop="tableComment">
                            <el-input size="small" v-model="formData.tableComment"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="生成模块名" prop="moduleName">
                            <el-input size="small" v-model="formData.moduleName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="生成包名" prop="packageName">
                            <el-input size="small" v-model="formData.packageName"></el-input>
                        </el-form-item>
                    </el-col>


                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="生成功能名" prop="functionName">
                            <el-input size="small" v-model="formData.functionName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="生成作者" prop="functionAuthor">
                            <el-input size="small" v-model="formData.functionAuthor"></el-input>
                        </el-form-item>
                    </el-col>


                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="生成类型" prop="menuType">
                            <el-select class="item-choose" style="width: 100%" v-model="formData.genMenuType"
                                       size="small"
                                       @change="selectChanged">
                                <el-option
                                        v-for="(item,index) in options"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11" v-if="showDirMenu">
                        <el-form-item label="生成目录" prop="menuType">
                            <el-select class="item-choose" style="width: 100%" v-model="formData.genParentMenuId"
                                       size="small">
                                <el-option
                                        v-for="(item,index) in parentMenuList"
                                        :key="index"
                                        :label="item.menuName"
                                        :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </el-card>

        <el-card style="margin-top: 1%">
            <div style="text-align: center;font-weight: bold">列信息</div>
            <el-table
                    row-key="id"
                    :header-cell-style="{'text-align':'center','color':'grey','font-weight':'600'}"
                    :cell-style="{'text-align':'center'}" border style="margin-top: 10px"
                    :data="cloumns" height="360">
                <el-table-column
                        label="字段列名"
                        prop="columnName"
                        width="150"
                        :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column label="字段描述" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.columnComment"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="物理类型"
                        prop="columnType"
                        width="150"
                        :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column label="Java类型" width="150">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.javaType">
                            <el-option label="Long" value="Long"></el-option>
                            <el-option label="String" value="String"></el-option>
                            <el-option label="Integer" value="Integer"></el-option>
                            <el-option label="Double" value="Double"></el-option>
                            <el-option label="BigDecimal" value="BigDecimal"></el-option>
                            <el-option label="Date" value="Date"></el-option>
                        </el-select>
                    </template>
                </el-table-column>


                <el-table-column label="插入" width="50">
                    <template slot-scope="scope">
                        <el-checkbox true-label="1" v-model="scope.row.isInsert"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="编辑" width="50">
                    <template slot-scope="scope">
                        <el-checkbox true-label="1" v-model="scope.row.isEdit"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="列表" width="50">
                    <template slot-scope="scope">
                        <el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="查询" width="50">
                    <template slot-scope="scope">
                        <el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="查询方式" width="150">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.queryType">
                            <el-option label="=" value="EQ"></el-option>
                            <el-option label="!=" value="NE"></el-option>
                            <el-option label=">" value="GT"></el-option>
                            <el-option label=">=" value="GTE"></el-option>
                            <el-option label="<" value="LT"></el-option>
                            <el-option label="<=" value="LTE"></el-option>
                            <el-option label="LIKE" value="LIKE"></el-option>
                            <el-option label="BETWEEN" value="BETWEEN"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="必填" width="50">
                    <template slot-scope="scope">
                        <el-checkbox true-label="1" v-model="scope.row.isRequired"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="显示类型" width="150">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.htmlType" class="el-select-item">
                            <el-option label="文本框" value="input"></el-option>
                            <el-option label="文本域" value="textarea"></el-option>
                            <el-option label="下拉框" value="select"></el-option>
                            <el-option label="单选框" value="radio"></el-option>
                            <el-option label="复选框" value="checkbox"></el-option>
                            <el-option label="日期控件" value="datetime"></el-option>
                            <el-option label="图片控件" value="image"></el-option>
                            <el-option label="开关控件" value="switch"></el-option>
                        </el-select>
                    </template>
                </el-table-column>


                <el-table-column label="字典类型" min-width="12%">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                            <el-option
                                    v-for="dict in dictOptions"
                                    :key="dict.type"
                                    :label="dict.name"
                                    :value="dict.type">
                                <span style="float: left">{{ dict.name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.type }}</span>
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>


            </el-table>
        </el-card>


        <div style="text-align: center;margin-top: 1%">
            <el-button size="small" @click="closePage">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/gen.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    let id = getQueryString("id");
    const cityOptions = ['新增', '删除', '修改', '查询', '导入', '导出'];
    new Vue({
        el: '#app',
        data() {
            return {
                formData: {},
                rules: {},
                showDirMenu: false,
                cloumns: [],
                checkAll: false,
                checkedCities: ['新增', '删除'],
                cities: cityOptions,
                isIndeterminate: true,
                options: [
                    {
                        value: '1',
                        label: '目录'
                    }, {
                        value: '2',
                        label: '菜单'
                    }],
                parentMenuList: [],
                dictOptions: [],
                value: '1',
            }
        },
        created() {
            if (id) {
                requests.get('/tool/table/detail/' + id)
                    .then((res) => {
                        if (res.code === '200') {
                            this.formData = res.data
                            this.formData.genController = res.data.genController.toString()
                            this.formData.genHtmlJs =  res.data.genHtmlJs.toString()
                            this.cloumns = res.data.genTableColumnList;
                            if (!res.data.genMenuType) {
                                this.formData.genMenuType = "1"
                            } else {
                                if (res.data.genMenuType === '2') {
                                    this.showDirMenu = true
                                }
                            }
                        }
                    });
            } else {
                this.formData = {}
            }

            this.getDictTypeList();

            requests.get("/sys/menu/getParentMenu").then(res => {
                this.parentMenuList = res.data;
            })

        },
        methods: {
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            getDictTypeList() {
                requests.get("/admin/sysDictType/list").then(res => {
                    if (res.code === '200') {
                        this.dictOptions = res.data.map(item => {
                            return {
                                name: item.name,
                                type: item.type
                            }
                        })
                    }
                })
            },
            selectChanged(value) {
                if (value === '2') {
                    this.showDirMenu = true
                } else {
                    this.showDirMenu = false
                }
            },
            handleSubmit() {
                if (id) {
                    this.formData.columns = this.columns
                    addOrUpdate('/tool/table/update', this);
                }
            }
        }
    });
</script>
</html>
